Welcome to Css!

2.10 nth-child选择器2

1、选择li的父元素中的前3个li子元素

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>css注释</title>

<style>

li:nth-child(-n+3){color:blue;}

</style>

</head>

<body>

<ul>

<li>我要好好学习1</li>

<li>我要好好学习2</li>

<li>我要好好学习3</li>

<li>我要好好学习4</li>

<li>我要好好学习5</li>

<li>我要好好学习6</li>

</ul>

</body>

</html>

返回值:


2、选择li父元素中的第4个li子元素开始的所有li子元素

<style>

li:nth-child(n+4){color:blue;}

</style>

返回值:


3、选择li父元素中的第3个li子元素开始,到第5个li子元素,两个选择器之间用冒号

<style>

li:nth-child(n+3):nth-child(-n+5){color:blue;}

</style>


4、选择li父元素中的第(1,4,7…)个li子元素

<style>

li:nth-child(3n+1){color:blue;}

</style>

返回值: